<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-of-type选择器</title>

    <style>

        ol li:first-child {
            background-color: royalblue;
        }

        ol li:last-of-type {
            background-color: red;
        }

        ol li:nth-of-type(3) {
            background-color: pink;
        }

        section div:nth-of-type(1) {
            background-color: pink;
        }

    </style>

</head>
<body>
    使用基本与nth-child一致
    <ol>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
    </ol>

    <h2>nth-of-type会把指定的盒子都排序号</h2>
    <h2>执行的时候先看：div(指定的元素) 之后回去看nth-child(1)指定的序号元素</h2>
    <h2>section div:nth-of-type(1)能选中熊二，因为nth-of-type(1)是先对指定元素排序，然后在寻找第1个元素</h2>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>

</body>
</html>